<template>
    <div class="about">
        <!-- to的字符串写法 -->
        <router-link to="/ref">跳转</router-link>
        <!-- 使用 v-bind 的 JS 表达式-->
        <!--<router-link v-bind:to="'/ref'">ref</router-link>-->
        <!--不写 v-bind 也可以，就像绑定别的属性一样-->
        <!-- <router-link :to="'/ref'">ref</router-link>-->
        <!--同上-->
        <!-- <router-link :to="{ path: '/ref' }">ref1</router-link>-->
        <!--命名的路由-->
        <!-- <router-link :to="{ name: 'Ref', params: { userId: 123 }}">ref2</router-link>-->
        <!--带查询参数，下面的结果为 /ref?plan=private-->
        <!--<router-link :to="{ path: '/ref', query: { plan: 'private' }}">ref3</router-link>-->
        <!--<router-link :to="{name:'Ref',params:{id:12345}}">666</router-link>-->
        <!-- <router-link>的replace属性 -->
        <!-- 作用：控制路由跳转时操作浏览器历史记录的模式-->
        <!--浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push-->
        <!--<router-link to="/ref" replace></router-link>-->
        <h1 @click="goRef">点击我跳转到ref</h1>
        <!-- 缓存路由组件-->
        <!-- 作用：让不展示的路由组件保持挂载，不被销毁。-->
        <!--include 指的是组件名-->
        <keep-alive include="Ref">
            <router-view></router-view>
        </keep-alive>
        <!--路由组件所独有的两个新的生命周期钩子，用于捕获路由组件的激活状态：-->
        <!--activated路由组件被激活时触发。-->
        <!--deactivated路由组件失活时触发。-->
        <!--注意：需要配合前面的缓存路由组件使用（没有缓存路由组件不起效果）-->
    </div>
</template>
<script>
    export default {
        name: "Router",
        methods:{
            // 编程式导航
            goRef(){
                // $router的两个API

                this.$router.push({
                    name:'Ref',
                    query:{
                        id:123,
                        title:'我是彭于晏'
                    }
                })
                this.$router.replace({
                    name:'Ref',
                    params:{
                        id:123,
                        title:'我是彭于晏'
                    }
                })
                // query是什么:
                // 从 URL 的 search 部分提取的已解码查询参数的字典。就是地址中?后面的内容，不过是已经解析的。
                //
                // params是什么
                // 从 path 中提取的已解码参数字典。就是vue路由中的路径参数

                // 区别：
                // this.$router.push： - 跳转到指定URL，向history栈添加一个新的记录;- 点击后退会返回至上一个页面
                // this.$router.replace：-跳转到指定URL，替换history栈中最后一个记录，-点击后退会返回至上上一个页面
            }
            // this.$router.forward() //前进
            // this.$router.back() //后退
            // this.$router.go() //可前进也可后退  - 当val为-1时回到上一页。- 当val为0时刷新当前页面。- 当val为1到下一页。
        },
        beforeRouteEnter (to, from, next) {
            console.log(to, from, next)
            // 在渲染该组件的对应路由被 confirm 前调用
            // 不！能！获取组件实例 `this`
            // 因为当守卫执行前，组件实例还没被创建
            // 该钩子在全局守卫beforeEach和独享守卫beforeEnter之后，全局beforeResolve和全局afterEach之前调用，要注意的是该守卫内访问不到组件的实例，也就是this为undefined。因为它在组件生命周期beforeCreate阶段触发，此时的新组件还没有被创建。在这个钩子函数中，可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数
        },
        beforeRouteUpdate (to, from, next) {
            console.log(to, from, next)
            // 在当前路由改变，但是该组件被复用时调用
            // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
            // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
            // 可以访问组件实例 `this`
        },
        beforeRouteLeave (to, from, next) {
            console.log(to, from, next)
            // 导航离开该组件的对应路由时调用
            // 可以访问组件实例 `this`
            // 这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过next( false )来取消
        }
    }
</script>
